<template>
    <div>
        <div class="bg"></div>
       
        <div class="singup">
            <router-link to="/appmain" class="topBtn">
               <i class="iconfont arrow-left">&#xe641;</i><span>学生签到</span>
             </router-link>
            <div class="nowTime">课程进行中：<span class="courseName">{{course}}</span></div>
            <div class="circle1 flex">
                <div class="circle2 flex" @click="setsign">
                    <div class="signBtn">
                       {{signBtn}}
                    </div>
                </div>
            </div>
        </div>

        <div class="signUpCourse">
            <div class="signUpTitle">今日签到课程</div>
            <div class="singUpCourseList">
                <div class="singUpCourseItem" v-for="item in courselist" :key="item.sign_Id">
                    <p class="courseTitle">{{item.Cos_Name}}</p>
                    <p class="signTime">{{item.Sig_time | dateFormat("YYYY-MM-DD HH:mm")}}</p>
                </div>            
            </div>
        </div>
        <div class="bottombar">
            <router-link to='/appmain'>
                <img src="../../assets/app/home.png" alt="">
            </router-link>
           
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      course: null, //当前签到课程
      signBtn: "签到", //签到状态
      courselist: null, //签到列表
      dt_id: null, //当前课堂编码
      studentinfo: null, //学员信息
      Course_ID: null, //当前签到课程
      couid: this.$route.params.couid,
      couname: this.$route.params.couname
    };
  },
  //初始化
  mounted() {
    //初始化页面加载
    this.getclessroom();
  },
  //事件
  methods: {
    //初始化
    getclessroom() {
      this.dt_id = localStorage.getItem("dt_id"); //获取课堂编码
      this.studentinfo = JSON.parse(localStorage.getItem("studentinfo")); //学员信息
      if (this.dt_id != null || this.dt_id != "") {
        if (this.couid != undefined) {
          this.$axios
            .get("/Signin/V1", {
              params: {
                cosid: this.couid,
                St_Card: this.studentinfo.St_Card,
                dt_id: this.dt_id
              }
            })
            .then(Json => {
              if(Json.data=="ok"){
                this.course = this.couname; //课程名称
                this.Course_ID = this.couid;
                  //签到列表
                 this.setsignlist();   
              }else{
                  this.signBtn = "已签到";
                  //签到列表
                  this.setsignlist();  
                  return false;

              }
              //console.log(Json.data);             
            })
            .catch(err => {
              this.$message.error({
                message: "获取信息失败！请重新登录。。",
                type: "success",
                center: "true",
                offset: 300
              });
            });
        } else {
          this.$axios
            .get("/Classroom", {
              params: { dt_id: this.dt_id, St_Card: this.studentinfo.St_Card }
            })
            .then(Json => {
              //1、开课显示部分
              if (Json.data.temp == "no") {
                this.course = "等待开课中";
              } else {
                this.course = Json.data.course.Cos_Name; //课程名称
                this.Course_ID = Json.data.course.Cos_ID; //课程编码
              }
              //2、签到状态1:已经签到 2：未签到
              if (Json.data.flag == 1) {
                this.signBtn = "已签到";
              } else {
                this.signBtn = "签到";
              }
              //签到列表
              this.setsignlist();             
            })
            .catch(err => {
              this.$message.error({
                message: "获取信息失败！请重新登录。。",
                type: "success",
                center: "true",
                offset: 300
              });
            });
        }
      }
    },
    //签到列表
    setsignlist(){
      this.$axios
          .get("/Signin/V2", {
              params: {               
                St_Card: this.studentinfo.St_Card,
              }
            })
          .then(Json=>{
              //3、签到列表部分
              this.courselist = Json.data; //签到列表
          })
          .catch(err=>{
           this.$message.error({
                message: "获取签到列表失败！！",
                type: "success",
                center: "true",
                offset: 300
              });
          })
    },
    //签到
    setsign() {     
      if (this.signBtn == "已签到") {
        this.$message({
          message: "不能重复签到",
          center: "true",
          offset: 300
        });
        return false;
      }
      if (this.course == "等待开课中") {
        this.$message({
          message: "课程还未开启不能签到",
          center: "true",
          offset: 300
        });
        return false;
      }
      if (this.course == "签到中") {
        this.$message({
          message: "签到进行中请稍后。。。",
          center: "true",
          offset: 300
        });
        return false;
      }
      this.signBtn == "签到中"        
      //数据
      var signin = {
        dt_id: this.dt_id,
        St_Card: this.studentinfo.St_Card,
        Course_ID: this.Course_ID,
        St_Name: this.studentinfo.St_Name,
        St_phone: this.studentinfo.St_Phone,
        Cos_Name: this.course
      };
      this.$axios
        .post("/Signin", signin)
        .then(Json => { 
          if(Json.data == "off"){
            this.$message({
              message: "已经签到不能重复签！！",
              type: "success",
              center: "true",
              offset: 300
            });
            return false;
          }         
          if (Json.data == "ok") {
            this.signBtn = "已签到";
            this.$message({
              message: "签到成功！",
              type: "success",
              center: "true",
              offset: 300
            });            
            //初始化页面加载
            this.getclessroom();
          } 
          if(Json.data == "no") {
            this.$message.error({
              message: "信息异常签到失败！",
              type: "success",
              center: "true",
              offset: 300
            });
          }
        })
        .catch(err => {
          this.$message.error({
            message: "获取信息失败！请重新登录。。",
            type: "success",
            center: "true",
            offset: 300
          });
        });
    }
  }
};
</script>
<style scoped>
.bg {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #86b9d8, #5883a5);
  z-index: -1;
  width: 100%;
}

@font-face {
  font-family: "iconfont"; /* project id 1506859 */
  src: url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.eot");
  src: url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.woff") format("woff"),
    url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1506859_nc7j1fe4rs.svg#iconfont") format("svg");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: sub;
  float: left;
}
.topBtn {
  color: white;
  text-decoration: none;
  margin-left: -3rem;
}

.nowTime {
  text-align: center;
  color: white;
  margin-top: 2rem;
  font-size: 20px;
}
.singup {
  text-align: center;
  font-size: 18px;
  width: 100%;
  height: 18rem;
  /* background: #007aff; */
  /* background: linear-gradient(to bottom,#86b9d8 ,#3677b3); */
  background-image: linear-gradient(0deg, #86b9d8 0%, #276ace 100%);
  margin-bottom: 0.8rem;
  padding-top: 0.5rem;
  overflow: hidden;
}
.flex {
  display: box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.circle1 {
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  background: rgba(255, 255, 255, 0.4);
  margin: 1rem auto 0 auto;
}
.circle2 {
  width: 7rem;
  height: 7rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  background: #ffffff;
  margin: 0 auto;
}
.signBtn {
  width: 6.2rem;
  height: 6.2rem;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  border: 1px #7ebdff solid;
  text-align: center;
  line-height: 6.2rem;
  color: #007aff;
  font-size: 20px;
  font-weight: 600;
}
.signUpCourse {
  margin-bottom: 5rem;
}
.signUpTitle {
  border-bottom: 1px solid white;
  color: white;
  padding-left: 10px;
  padding-bottom: 10px;
  font-size: 16px;
}
.singUpCourseItem {
  margin-left: 5%;
  border-bottom: 1px solid white;
  height: 3rem;
  line-height: 1rem;
  color: white;
  font-size: 16px;
}
.courseName {
  color: greenyellow;
}
.courseTitle,
.signTime {
  display: inline-block;
}
.courseTitle {
  width: 53%;
  /* border: 1px solid red; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}
.signTime {
  /* border: 1px solid blue; */
  width: 45%;
  text-align: center;
}

.bottombar {
  position: fixed;
  z-index: 900;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* border: 1px solid white; */
  height: 50px;
  text-align: center;
  background: rgb(36, 164, 255);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
}
.bottombar img {
  background: white;
  padding: 10px;
  border-radius: 50%;
  position: relative;
  /* top: -20px; */
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  /* border: 5px solid gray; */
}
</style>
